
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
      
      
      <link rel="icon" href="../../assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.6.5">
    
    
      
        <title>开发环境建立 - 基于WEB的应用程序开发-实验指导书</title>
      
    
    
      <link rel="stylesheet" href="../../assets/stylesheets/main.8608ea7d.min.css">
      
        
        <link rel="stylesheet" href="../../assets/stylesheets/palette.06af60db.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../../assets/stylesheets/extra.css">
    
    <script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      

    
    
    
  </head>
  
  
    
    
      
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="indigo">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#_1" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../../index.html" title="基于WEB的应用程序开发-实验指导书" class="md-header__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            基于WEB的应用程序开发-实验指导书
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              开发环境建立
            
          </span>
        </div>
      </div>
    </div>
    
      
        <form class="md-header__option" data-md-component="palette">
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="purple" data-md-color-accent="indigo"  aria-label="夜间模式"  type="radio" name="__palette" id="__palette_0">
    
      <label class="md-header__button md-icon" title="夜间模式" for="__palette_1" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg>
      </label>
    
  
    
    
    
    <input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="teal" data-md-color-accent="indigo"  aria-label="日间模式"  type="radio" name="__palette" id="__palette_1">
    
      <label class="md-header__button md-icon" title="日间模式" for="__palette_0" hidden>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg>
      </label>
    
  
</form>
      
    
    
      <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../../index.html" title="基于WEB的应用程序开发-实验指导书" class="md-nav__button md-logo" aria-label="基于WEB的应用程序开发-实验指导书" data-md-component="logo">
      
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>

    </a>
    基于WEB的应用程序开发-实验指导书
  </label>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    首页
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
          
        
        <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2" >
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    1. 实验环境搭建
    
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            1. 实验环境搭建
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../Java/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    1.1 前端环境搭建
    
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Java/05_%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    1.2 后端境搭建
    
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../01_Html%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    2 Html基础实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../02_CSS%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    3 CSS基础实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../03_Javascript%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    04 Javascript基础
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../03_Javascript%E9%AB%98%E7%BA%A7%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    05 Javascript高级实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../04_jQuery/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 jQuery
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../04_Bootstrap/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Bootstrap
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../04_Vue.js%E5%9F%BA%E7%A1%80/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Vue.js
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Java/05_JSP%E7%9A%84%E9%9A%90%E5%90%AB%E5%AF%B9%E8%B1%A1%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    05 JSP的隐含对象实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Java/06_Servlet%E5%8F%8AFilter%E5%9F%BA%E7%A1%80%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    06 Servlet及Filter基础实验
    
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../../Java/07_SpringBoot%E7%BB%BC%E5%90%88%E5%AE%9E%E9%AA%8C/index.html" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    07 Spring Boot综合实验
    
  </span>
  

      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

  

<nav class="md-nav md-nav--secondary" aria-label=" ">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
       
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#1" class="md-nav__link">
    <span class="md-ellipsis">
      1 实验类型
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#2" class="md-nav__link">
    <span class="md-ellipsis">
      2 实验目的
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#3" class="md-nav__link">
    <span class="md-ellipsis">
      3 实验要求
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#4" class="md-nav__link">
    <span class="md-ellipsis">
      4 实验环境
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#5" class="md-nav__link">
    <span class="md-ellipsis">
      5 约定
    </span>
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#6" class="md-nav__link">
    <span class="md-ellipsis">
      6 实验步骤
    </span>
  </a>
  
    <nav class="md-nav" aria-label="6 实验步骤">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#visual-studio-code" class="md-nav__link">
    <span class="md-ellipsis">
      安装Visual Studio Code
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#python" class="md-nav__link">
    <span class="md-ellipsis">
      安装Python
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#rest-client" class="md-nav__link">
    <span class="md-ellipsis">
      REST Client测试
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_2" class="md-nav__link">
    <span class="md-ellipsis">
      浏览器测试
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#_3" class="md-nav__link">
    <span class="md-ellipsis">
      调试
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



<h1 id="_1">开发环境建立</h1>
<h2 id="1">1 实验类型</h2>
<p>验证型，2学时，必选实验</p>
<h2 id="2">2 实验目的</h2>
<ul>
<li>
<p>建立前端开发环境</p>
</li>
<li>
<p>建立后端开发环境</p>
</li>
<li>
<p>熟悉前代码调试基本过程</p>
</li>
</ul>
<h2 id="3">3 实验要求</h2>
<ul>
<li>
<p>安装前端开发所需软件；创建Hello World!页面作为系统入口；实现后端入口；</p>
</li>
<li>
<p>实验完成后，将HTML代码整理成实验报告</p>
</li>
</ul>
<blockquote>
<p>报告以Word格式编写，以学号作为文件名</p>
<p>实验报告至少应用包含：<strong>关键步骤截图</strong>、源代码</p>
</blockquote>
<h2 id="4">4 实验环境</h2>
<p>Windows 7+，浏览器（推荐<code>Microsoft Edge/Chrome/Firefox</code>等），Visual Studio Code(Vscode)，REST Client扩展，Python 3+，Uvicorn，FastAPI</p>
<h2 id="5">5 约定</h2>
<p>正文中会使用<code>{变量名}</code>语法（类似Python格式化字符串），如张三同学的学号为<strong>007</strong>，引用变量{学号}实际替换为<strong>007</strong>。</p>
<h2 id="6">6 实验步骤</h2>
<p>创建工作目录：<code>盘符:/{学号}</code>，如：<code>C:/007</code>，后续文件均存放在工作目录</p>
<h3 id="visual-studio-code">安装Visual Studio Code</h3>
<ol>
<li>
<p>下载<strong>Vscode</strong></p>
<blockquote>
<p>在官网下载<a href="https://code.visualstudio.com/">https://code.visualstudio.com/</a></p>
<p>或在课程群文件中下载</p>
</blockquote>
</li>
<li>
<p>启动安装向导；安装过程中选中将<strong>vscode</strong>加入文件夹右键</p>
</li>
<li>
<p>在<strong>资源管理器</strong>中打开工作目录</p>
</li>
<li>
<p>并在目录内空白处右键打开快捷菜单，选择<code>通过Code打开</code>，界面布局如下：</p>
<p><img alt="vscode" src="img/vscode.png" /></p>
</li>
<li>
<p>修改终端默认类型为cmd，在菜单<code>View/Command Pallete...</code>中输入<code>Terminal:Select Default Profile</code>回车后在弹出菜单中选择<strong>Command Prompt</strong></p>
</li>
<li>
<p>在<code>浏览器(文件)视图</code>中创建<strong>static</strong>文件夹</p>
</li>
<li>
<p>创建<strong>Hello World!</strong>入口页面<code>static/greeting.html</code>，参考代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">static/greeting.html</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-0-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-0-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-0-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-0-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-0-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-0-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-0-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-0-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-0-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-0-10">10</a></span>
<span class="normal"><a href="#__codelineno-0-11">11</a></span>
<span class="normal"><a href="#__codelineno-0-12">12</a></span>
<span class="normal"><a href="#__codelineno-0-13">13</a></span>
<span class="normal"><a href="#__codelineno-0-14">14</a></span>
<span class="normal"><a href="#__codelineno-0-15">15</a></span>
<span class="normal"><a href="#__codelineno-0-16">16</a></span>
<span class="normal"><a href="#__codelineno-0-17">17</a></span>
<span class="normal"><a href="#__codelineno-0-18">18</a></span>
<span class="normal"><a href="#__codelineno-0-19">19</a></span>
<span class="normal"><a href="#__codelineno-0-20">20</a></span>
<span class="normal"><a href="#__codelineno-0-21">21</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="cm">&lt;!-- 声明了文档的类型 --&gt;</span>
<a id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="cp">&lt;!DOCTYPE html&gt;</span>
<a id="__codelineno-0-3" name="__codelineno-0-3"></a>
<a id="__codelineno-0-4" name="__codelineno-0-4"></a><span class="cm">&lt;!-- HTML 页面的根元素，该标签的结束标志为&lt;/html&gt; --&gt;</span>
<a id="__codelineno-0-5" name="__codelineno-0-5"></a><span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<a id="__codelineno-0-6" name="__codelineno-0-6"></a>
<a id="__codelineno-0-7" name="__codelineno-0-7"></a><span class="cm">&lt;!-- 包含了文档的元数据（meta），如&lt;meta charset=&quot;utf-8&quot;&gt;定义网页编码格式为utf-8 --&gt;</span>
<a id="__codelineno-0-8" name="__codelineno-0-8"></a><span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-9" name="__codelineno-0-9"></a>  <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;UTF-8&quot;</span><span class="p">&gt;</span><span class="cm">&lt;!-- 编码 --&gt;</span>
<a id="__codelineno-0-10" name="__codelineno-0-10"></a>  <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>My First Web Page!<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span><span class="cm">&lt;!-- 定义文档的标题 --&gt;</span>
<a id="__codelineno-0-11" name="__codelineno-0-11"></a><span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<a id="__codelineno-0-12" name="__codelineno-0-12"></a>
<a id="__codelineno-0-13" name="__codelineno-0-13"></a><span class="cm">&lt;!-- 定义文档的主体，即网页可见的页面内容，该标签的结束标志为&lt;/body&gt; --&gt;</span>
<a id="__codelineno-0-14" name="__codelineno-0-14"></a><span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-0-15" name="__codelineno-0-15"></a>  <span class="cm">&lt;!-- 作为一个标题使用，该标签的结束标志为&lt;/h1&gt; --&gt;</span>
<a id="__codelineno-0-16" name="__codelineno-0-16"></a>  <span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>First Tiltle!<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<a id="__codelineno-0-17" name="__codelineno-0-17"></a>  <span class="cm">&lt;!-- 作为一个段落显示，该标签的结束标志为&lt;/p&gt; --&gt;</span>
<a id="__codelineno-0-18" name="__codelineno-0-18"></a>  <span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Hello World!<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<a id="__codelineno-0-19" name="__codelineno-0-19"></a><span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<a id="__codelineno-0-20" name="__codelineno-0-20"></a>
<a id="__codelineno-0-21" name="__codelineno-0-21"></a><span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在<code>浏览器(文件)视图</code>中右键<code>static/greeting.html</code>，选中快捷菜单<code>Open in default browser</code>并在浏览器中观察页面显示情况</p>
</li>
</ol>
<h3 id="python">安装Python</h3>
<ol>
<li>
<p>下载<strong>Python</strong></p>
<blockquote>
<p>在官网下载<a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></p>
<p>或在课程群文件中下载</p>
</blockquote>
</li>
<li>
<p>启动安装向导，勾选<code>Add python.exe to PATH</code>，<code>Use admin privileges when installing py.exe</code></p>
</li>
<li>
<p>安装成功后在<strong>Vscode</strong>的<code>终端(Terminal)</code>菜单中新建终端</p>
<blockquote>
<p>注意终端类型为<code>cmd</code></p>
</blockquote>
</li>
<li>
<p>在终端中查看<strong>Python版本</strong>及依赖情况，确认<strong>Python</strong>与<strong>pip</strong>工具已正确安装</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-1-1">1</a></span>
<span class="normal"><a href="#__codelineno-1-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1"></a>python<span class="w"> </span>-V
<a id="__codelineno-1-2" name="__codelineno-1-2"></a>pip<span class="w"> </span>list
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>修改pip仓库为阿里镜像服务器</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-2-1">1</a></span>
<span class="normal"><a href="#__codelineno-2-2">2</a></span>
<span class="normal"><a href="#__codelineno-2-3">3</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1"></a>pip<span class="w"> </span>config<span class="w"> </span><span class="nb">set</span><span class="w"> </span>global.index-url<span class="w"> </span>http://mirrors.aliyun.com/pypi/simple/
<a id="__codelineno-2-2" name="__codelineno-2-2"></a>pip<span class="w"> </span>config<span class="w"> </span><span class="nb">set</span><span class="w"> </span>install.trusted-host<span class="w"> </span>mirrors.aliyun.com
<a id="__codelineno-2-3" name="__codelineno-2-3"></a>pip<span class="w"> </span>config<span class="w"> </span>get<span class="w"> </span>global.index-url
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>使用<strong>pip</strong>安装服务端依赖</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-3-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1"></a>pip<span class="w"> </span>install<span class="w"> </span>fastapi<span class="w"> </span>uvicorn
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在工作目录创建后端入口文件<code>index.py</code>，参考代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">index.py</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-4-1"> 1</a></span>
<span class="normal"><a href="#__codelineno-4-2"> 2</a></span>
<span class="normal"><a href="#__codelineno-4-3"> 3</a></span>
<span class="normal"><a href="#__codelineno-4-4"> 4</a></span>
<span class="normal"><a href="#__codelineno-4-5"> 5</a></span>
<span class="normal"><a href="#__codelineno-4-6"> 6</a></span>
<span class="normal"><a href="#__codelineno-4-7"> 7</a></span>
<span class="normal"><a href="#__codelineno-4-8"> 8</a></span>
<span class="normal"><a href="#__codelineno-4-9"> 9</a></span>
<span class="normal"><a href="#__codelineno-4-10">10</a></span>
<span class="normal"><a href="#__codelineno-4-11">11</a></span>
<span class="normal"><a href="#__codelineno-4-12">12</a></span>
<span class="normal"><a href="#__codelineno-4-13">13</a></span>
<span class="normal"><a href="#__codelineno-4-14">14</a></span>
<span class="normal"><a href="#__codelineno-4-15">15</a></span>
<span class="normal"><a href="#__codelineno-4-16">16</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1"></a><span class="kn">from</span><span class="w"> </span><span class="nn">fastapi</span><span class="w"> </span><span class="kn">import</span> <span class="n">FastAPI</span>
<a id="__codelineno-4-2" name="__codelineno-4-2"></a><span class="kn">from</span><span class="w"> </span><span class="nn">fastapi.responses</span><span class="w"> </span><span class="kn">import</span> <span class="n">FileResponse</span>
<a id="__codelineno-4-3" name="__codelineno-4-3"></a><span class="kn">from</span><span class="w"> </span><span class="nn">fastapi.staticfiles</span><span class="w"> </span><span class="kn">import</span> <span class="n">StaticFiles</span>
<a id="__codelineno-4-4" name="__codelineno-4-4"></a><span class="kn">import</span><span class="w"> </span><span class="nn">os</span>
<a id="__codelineno-4-5" name="__codelineno-4-5"></a>
<a id="__codelineno-4-6" name="__codelineno-4-6"></a><span class="n">app</span> <span class="o">=</span> <span class="n">FastAPI</span><span class="p">()</span>
<a id="__codelineno-4-7" name="__codelineno-4-7"></a>
<a id="__codelineno-4-8" name="__codelineno-4-8"></a><span class="c1"># 指定静态文件目录的路径</span>
<a id="__codelineno-4-9" name="__codelineno-4-9"></a><span class="n">static_dir</span> <span class="o">=</span> <span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">os</span><span class="o">.</span><span class="n">path</span><span class="o">.</span><span class="n">dirname</span><span class="p">(</span><span class="vm">__file__</span><span class="p">),</span> <span class="s2">&quot;static&quot;</span><span class="p">)</span>
<a id="__codelineno-4-10" name="__codelineno-4-10"></a>
<a id="__codelineno-4-11" name="__codelineno-4-11"></a><span class="c1"># 将StaticFiles中间件添加到应用</span>
<a id="__codelineno-4-12" name="__codelineno-4-12"></a><span class="n">app</span><span class="o">.</span><span class="n">mount</span><span class="p">(</span><span class="s2">&quot;/static&quot;</span><span class="p">,</span> <span class="n">StaticFiles</span><span class="p">(</span><span class="n">directory</span><span class="o">=</span><span class="n">static_dir</span><span class="p">),</span> <span class="n">name</span><span class="o">=</span><span class="s2">&quot;static&quot;</span><span class="p">)</span>
<a id="__codelineno-4-13" name="__codelineno-4-13"></a>
<a id="__codelineno-4-14" name="__codelineno-4-14"></a><span class="nd">@app</span><span class="o">.</span><span class="n">get</span><span class="p">(</span><span class="s2">&quot;/&quot;</span><span class="p">)</span>
<a id="__codelineno-4-15" name="__codelineno-4-15"></a><span class="k">def</span><span class="w"> </span><span class="nf">get_index</span><span class="p">():</span>
<a id="__codelineno-4-16" name="__codelineno-4-16"></a>    <span class="k">return</span> <span class="n">FileResponse</span><span class="p">(</span><span class="s2">&quot;static/greeting.html&quot;</span><span class="p">)</span>
</code></pre></div></td></tr></table></div>
<blockquote>
<p>注意：与<strong>static</strong>目录相关的代码</p>
</blockquote>
</li>
<li>
<p>在终端(Terminal)启动服务器，留意终端输出</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">启动服务</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-5-1">1</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1"></a>uvicorn<span class="w"> </span>index:app<span class="w"> </span>--host<span class="w"> </span><span class="m">127</span>.0.0.1<span class="w"> </span>--port<span class="w"> </span><span class="m">8000</span>
</code></pre></div></td></tr></table></div>
</li>
</ol>
<h3 id="rest-client">REST Client测试</h3>
<ol>
<li>
<p>在<strong>Vscode侧边栏</strong>中打开<strong>扩展视图</strong></p>
</li>
<li>
<p>在<strong>搜索框</strong>输入<code>REST Client</code></p>
</li>
<li>
<p>在<strong>搜索结果</strong>中选中<code>REST Client</code>并安装</p>
</li>
<li>
<p>创建<strong>REST Client</strong>测试文件：<code>static/greeting_test.http</code>，代码如下：</p>
<div class="highlight"><table class="highlighttable"><tr><th colspan="2" class="filename"><span class="filename">greeting_test.http</span></th></tr><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"><a href="#__codelineno-6-1">1</a></span>
<span class="normal"><a href="#__codelineno-6-2">2</a></span></pre></div></td><td class="code"><div><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1"></a><span class="c1">### Request local html page</span>
<a id="__codelineno-6-2" name="__codelineno-6-2"></a>GET<span class="w"> </span>http://localhost:8000/static/greeting.html<span class="w"> </span>HTTP/1.1
</code></pre></div></td></tr></table></div>
</li>
<li>
<p>在<strong>Vscode</strong>浏览视图中选中<code>static/greeting_test.http</code></p>
</li>
<li>
<p>在<strong>代码编辑器</strong>中点击<strong>第2行代码上方</strong>的<code>Send Request</code>链接</p>
<blockquote>
<p>如果没有出现该链接，请检查前述步骤</p>
</blockquote>
</li>
<li>
<p>观察<strong>返回代码</strong>中与Http相关的各选项</p>
</li>
</ol>
<h3 id="_2">浏览器测试</h3>
<ol>
<li>
<p>启动浏览器并地址栏输入<code>http://localhost:8000/static/greeting.html</code></p>
<p><img alt="hello world" src="img/hello%20world.png" /></p>
</li>
<li>
<p>在浏览器中打开(快捷键F12)<strong>开发者工具</strong>，熟悉各选项卡中的界面，留意与<code>greeting.html</code>页面相关内容</p>
<blockquote>
<p>注：最常用的几个选项卡有：<strong>Element</strong>，<strong>Source</strong>，<strong>Network</strong>等</p>
</blockquote>
</li>
<li>
<p>在<code>Netwrok</code>选项卡中选中<code>greeting.html</code>观察<code>标头</code>等选项卡中与Http相关的各选项</p>
</li>
</ol>
<h3 id="_3">调试</h3>
<ol>
<li>
<p>将输出字符串<code>Hello World!</code>改为<code>Hello Web！</code></p>
</li>
<li>
<p>分别在<strong>浏览器</strong>和<strong>REST Client</strong>测试</p>
</li>
</ol>












                
              </article>
            </div>
          
          
  <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>

<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "../..", "features": ["content.code.copy", "content.tabs.link", "navigation.expand", "navigation.sections", "navigation.path"], "search": "../../assets/javascripts/workers/search.f8cc74c7.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../../assets/javascripts/bundle.f1b6f286.min.js"></script>
      
    
  </body>
</html>